<template>
    <div class="index_bottom">
        <el-row >
  <el-col :span="6">
      <router-link tag="div" to="/index/first" class="bottom_item">
            <div>
                <img src="../../assets/njrpic/index_active.png" alt="" v-if="(path==='/index/first')">
                <img src="../../assets/njrpic/index.png" alt="" v-else>
            </div>
            首页
        </router-link>
  </el-col>
  <el-col :span="6">
      <router-link tag="div" to="/index/history" class="bottom_item">
            <div>
                <img src="../../assets/njrpic/history_active.png" alt="" v-if="(path==='/index/history')">
                <img src="../../assets/njrpic/history.png" alt="" v-else>
            </div>
            历史记录
        </router-link>
  </el-col>
  <el-col :span="6">
      <router-link tag="div" to="/index/medal" class="bottom_item">
            <div>
                <img src="../../assets/njrpic/medal_active.png" alt="" v-if="(path==='/index/medal')">
                <img src="../../assets/njrpic/medal.png" alt="" v-else>
            </div>
            勋章
        </router-link>
  </el-col>
  <el-col :span="6">
      <router-link tag="div" to="/index/fans" class="bottom_item">
            <div>
                <img src="../../assets/njrpic/fans_active.png" alt="" v-if="(path==='/index/fans')">
                <img src="../../assets/njrpic/fans.png" alt="" v-else>
            </div>
            薯粉
        </router-link>
  </el-col>
</el-row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            path:'/index/first'
        }
    },
   watch:{
		            $route(to,from){
		                this.path = to.path
		            }
		        },
}
</script>
<style lang="less" scoped>
.index_bottom{
    background-color: white;
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    >.el-row{
        width: 100%;
    text-align: center;
    margin: 15px;
    }
}
</style>